<template>
  <div>
    <h1>App</h1>
    <p v-bgcolor="'yellow'">{{num | fixedNum(4) | add$}}</p>
    <button @click="num++">累加{{num}}</button>
    <button @click="$destroy()">卸载自己{{num}}</button>
    <div>
      <h1 :style="{opacity}">渐变隐藏</h1>
      <button @click="stopChange">停止</button>
    </div>
    <Count/>
  </div>

</template>

<script>
import Count from "@/components/Count.vue"
export default {
  name: "App",
  components: {
    Count
  },
  data() {
    return {
      num: 12,
      opacity: 0.6,
      timerId: null,
    }
  },
  methods: {
    stopChange() {
      this.$destroy();
    }
  },
 
  directives: {
    bgcolor(el, bending) {
      el.style.background = bending.value;
    }
  },
  
  mounted() {
    console.log('----mounted',"DOM加载完毕，可以添加事件，还有定时器功能");
    this.timerId = setInterval(() => {
      console.log('qqq')
      this.opacity -= 0.01;
      if(this.opacity <= 0) this.opacity = 1;
    },100)
  },
  beforeDestroy() {
    clearInterval(this.timerId);
  }
}
</script>

<style>

</style>